<template>
  <div class="my-page">
    <!-- 用户信息区域 -->
    <div class="user-header">
      <div class="user-info">
        <div class="avatar-container">
          <img v-if="userData.baseInfo.avatar" :src="userData.baseInfo.avatar" class="avatar" alt="头像" />
          <img v-else src="../../assets/images/default.png" alt="" class="avatar" />
        </div>

        <div class="user-details">
          <h2 class="username">
            {{ userData.baseInfo?.nickname || '游客' }}
          </h2>
          <p v-if="!userStore.token" class="login-hint">点击登录更多功能</p>
        </div>

        <button v-if="!userStore.token" @click="$router.push('/login')" class="action-button">登录</button>

        <button v-else @click="showEditProfile = true" class="action-button">编辑</button>
      </div>
    </div>

    <!-- 功能菜单 -->
    <div class="content-container">
      <!-- 数据统计 -->
      <div class="stats-card">
        <div class="stats-row">
          <div class="stat-item">
            <p class="stat-value">
              {{ userData.followCount }}
            </p>
            <p class="stat-label">关注</p>
          </div>
          <div class="stat-item">
            <p class="stat-value">
              {{ userData.fansCount }}
            </p>
            <p class="stat-label">粉丝</p>
          </div>
          <div class="stat-item">
            <p class="stat-value">
              {{ userData.followingCount }}
            </p>
            <p class="stat-label">在追</p>
          </div>
          <div class="stat-item">
            <p class="stat-value">
              {{ userData.historyCount }}
            </p>
            <p class="stat-label">历史</p>
          </div>
        </div>
      </div>

      <!-- 功能列表 -->
      <div class="feature-list">
        <div v-if="userStore.token" class="feature-item" @click="$router.push('/history')">
          <div class="feature-icon-text">
            <i class="fas fa-clock feature-icon"></i>
            <span class="feature-label">观看历史</span>
          </div>
          <i class="fas fa-chevron-right arrow-icon"></i>
        </div>
        <div class="feature-item" @click="$router.push('/favorites')">
          <div class="feature-icon-text">
            <i class="fas fa-heart feature-icon"></i>
            <span class="feature-label">我的收藏</span>
          </div>
          <i class="fas fa-chevron-right arrow-icon"></i>
        </div>
        <div class="feature-item" @click="$router.push('/ratings')">
          <div class="feature-icon-text">
            <i class="fas fa-star feature-icon"></i>
            <span class="feature-label">我的点赞</span>
          </div>
          <i class="fas fa-chevron-right arrow-icon"></i>
        </div>
        <div class="feature-item" @click="$router.push('/settings')">
          <div class="feature-icon-text">
            <i class="fas fa-cog feature-icon"></i>
            <span class="feature-label">设置</span>
          </div>
          <i class="fas fa-chevron-right arrow-icon"></i>
        </div>
        <div class="feature-item" @click="$router.push('/help')">
          <div class="feature-icon-text">
            <i class="fas fa-question-circle feature-icon"></i>
            <span class="feature-label">帮助与反馈</span>
          </div>
          <i class="fas fa-chevron-right arrow-icon"></i>
        </div>
        <div class="feature-item" @click="$router.push('/offline')">
          <div class="feature-icon-text">
            <i class="fas fa-download feature-icon"></i>
            <span class="feature-label">离线缓存</span>
          </div>
          <i class="fas fa-chevron-right arrow-icon"></i>
        </div>
      </div>

      <!-- VIP推广 -->
      <div class="vip-card">
        <div class="vip-content">
          <div class="vip-info">
            <h3 class="vip-title">开通会员</h3>
            <p class="vip-desc">享受无广告观影体验</p>
          </div>
          <button class="vip-button">立即开通</button>
        </div>
      </div>
    </div>

    <edit-profile-popup
      :show="showEditProfile"
      :user="userData.baseInfo"
      @update:show="showEditProfile = $event"
      @save="handleSaveProfile"
    />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { reqGetUserInfo } from '@/apis/user'
import EditProfilePopup from './components/EditProfilePopup.vue'

import { useUserStore } from '@/stores/user'
const userStore = useUserStore()

// 编辑个人资料弹窗
const showEditProfile = ref(false)

// 用户数据
const userData = ref({
  baseInfo: {},
  followCount: 0,
  fansCount: 0,
  followingCount: 0,
  historyCount: 0
})

// 保存个人资料
const handleSaveProfile = (updatedProfile) => {
  console.log('Updated profile:', updatedProfile)
  // 在这里可以调用API来保存更新后的用户信息
  // 例如: await reqUpdateUserInfo(updatedProfile)
  userData.value.baseInfo = updatedProfile
  // 可以选择性地重新加载用户数据或直接更新本地数据
}

// 加载用户数据
const loadUserData = async () => {
  try {
    const response = await reqGetUserInfo()
    userData.value = response.data
  } catch (error) {
    console.error('❌ 加载用户数据失败:', error)
  }
}

// 组件挂载时加载数据
onMounted(() => {
  if (userStore.token) {
    loadUserData()
  }
})
</script>

<style lang="scss" scoped>
.my-page {
  width: 100%;
  min-height: 100vh;
  background-color: #f9fafb;
  position: relative;
  font-family: 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
}

.user-header {
  background: linear-gradient(to bottom, #f5a3cc, #fde2ef); // 调整为更柔和的粉色渐变
  padding: 1.5rem 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);

  .user-info {
    display: flex;
    align-items: center;
    height: 7rem;

    .avatar-container {
      width: 4.5rem;
      height: 4.5rem;
      border-radius: 50%;
      background-color: #d1d5db;
      margin-right: 1rem;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.6);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

      .avatar {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }

    .user-details {
      flex: 1;

      .username {
        font-size: 1.125rem;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: #333;
        letter-spacing: 0.01em;
      }

      .login-hint {
        opacity: 0.8;
        font-size: 0.875rem;
      }
    }

    .action-button {
      background-color: rgba(255, 255, 255, 0.3);
      border: 1px solid rgba(255, 255, 255, 0.7);
      padding: 0.5rem 1.2rem;
      border-radius: 9999px;
      font-size: 0.875rem;
      font-weight: 500;
      transition: all 0.2s;
      color: #333;

      &:hover {
        background-color: rgba(255, 255, 255, 0.5);
        transform: translateY(-1px);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.content-container {
  padding: 1.25rem 1rem 5rem;
  max-width: 640px;
  margin: 0 auto;
  margin-top: -40px;

  .stats-card {
    background-color: white;
    border-radius: 0.75rem;
    padding: 1.25rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

    .stats-row {
      display: flex;
      justify-content: space-around;

      .stat-item {
        text-align: center;
        padding: 0 0.5rem;

        .stat-value {
          font-size: 1.25rem; // 从1.5rem调小到1.25rem
          font-weight: 600; // 从700调小到600
          color: #1f2937;
          margin-bottom: 0.3rem;
        }

        .stat-label {
          color: #6b7280;
          font-size: 0.875rem;
          font-weight: 500;
        }
      }
    }
  }

  .feature-list {
    background-color: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 0.75rem;

    .feature-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 1.25rem;
      border-bottom: 1px solid #f3f4f6;
      cursor: pointer;
      transition: all 0.2s;

      &:last-child {
        border-bottom: none;
      }

      &:hover {
        background-color: #f9fafb;
        transform: translateX(3px);
      }

      .feature-icon-text {
        display: flex;
        align-items: center;

        .feature-icon {
          color: #ec4899; // 调整为更协调的粉色
          margin-right: 0.9rem;
          font-size: 1.1rem;
          width: 1.5rem;
          text-align: center;
        }

        .feature-label {
          color: #1f2937;
          font-size: 0.95rem;
          font-weight: 500;
        }
      }

      .arrow-icon {
        color: #9ca3af;
      }
    }
  }

  .vip-card {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin-top: 0.75rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
    }

    .vip-content {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .vip-info {
        .vip-title {
          color: white;
          font-weight: 700;
          font-size: 1.125rem;
          margin-bottom: 0.3rem;
        }

        .vip-desc {
          color: white;
          opacity: 0.95;
          font-size: 0.875rem;
        }
      }

      .vip-button {
        background-color: white;
        color: #f59e0b;
        padding: 0.6rem 1.2rem;
        border-radius: 9999px;
        font-size: 0.875rem;
        font-weight: 600;
        border: none;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.2s;

        &:hover {
          transform: scale(1.05);
          box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15);
        }
      }
    }
  }
}
</style>
